import React, { useState, useMemo, memo } from 'react';
import useMonitoringModel from '../../useModels/useMonitoringModel.js';
import { Button, Modal, message } from 'antd';
import styles from './index.less';
import IconFont from '@/components/IconFont';
import classnames from 'classnames';
import useModel from '../../useModels/useModel.js';
import SpTable from './spList';
import AlarmTable from './alarmList';
import EmptyCenter from '@/components/EmptyCenter';
import { useUnmount } from 'ahooks';
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;

function PrefixZero(num, n) {
  return (Array(n).join(0) + num).slice(-n);
}
const DevMonitoring = () => {
  useUnmount(() => {
    clear();
  });
  const {
    state: { customAllList },
  } = useModel(model => [model.state.customAllList]);
  const model = useMonitoringModel(model => [
    model.subDevList,
    model.devLoading,
    model.subDevIndex,
    model.suItemData,
    model.selectedRowKeys,
  ]);
  const {
    refreshSubDevData,
    updateSpList,
    devLoading,
    getAlarmsBySu,
    subDevList,
    postCommand,
    suItemData,
    deleteAlarm,
    subDevIndex,
    setMonitorState,
    clear,
    selectedRowKeys,
  } = model;

  const filterMessage = customAllList.filter(item => {
    return item.name === '数据获取';
  });
  const [loading, setLoading] = useState(false);
  return (
    <div className={styles['container']}>
      <div className={styles['dev-monitor-wrap']}>
        <div className={styles['sub-dev']}>
          <div className={styles['sub-dev-name']}>子设备名称</div>
          <div className={styles['sub-dev-list-wrap']}>
            <ul className={styles['sub-dev-list']}>
              {!subDevList[0] && <EmptyCenter />}
              {subDevList.map((item, index) => {
                return (
                  <li
                    key={index.toString(36) + index}
                    className={classnames(
                      styles['sub-dev-item'],
                      subDevIndex === index && styles['selected'],
                    )}
                    onClick={() => {
                      updateSpList(index, item);
                    }}
                  >
                    <span>{PrefixZero(index)}</span>
                    <span>{item.name}</span>
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
        <div className={styles['sp']}>
          {filterMessage[0] && (
            <Button
              className={styles['refresh']}
              loading={loading}
              onClick={async () => {
                setLoading(true);
                const commandRes = await postCommand({
                  id: filterMessage[0].id,
                  suId: suItemData.suId,
                  fsuTypeId: JSON.parse(localStorage.getItem('deviceType')).id,
                  data: {
                    suId: suItemData.suId,
                    deviceId: '999999999',
                    spId: '999999999',
                  },
                });
                if (commandRes && commandRes.result) {
                  refreshSubDevData();
                }
                setLoading(false);
              }}
            >
              {!loading && <IconFont type={'iconshuaxin'} className={styles['refresh-icon']} />}
              <span>刷新数据</span>
            </Button>
          )}
          <SpTable />
        </div>
      </div>
      <div className={styles['alarm-wrap']}>
        <div className={styles['alarm-title']}>
          <span>设备告警</span>
          <Button
            style={{ float: 'right', marginTop: '7px' }}
            className={styles['delete']}
            disabled={!selectedRowKeys[0]}
            onClick={() => {
              confirm({
                title: '批量删除',
                icon: <ExclamationCircleOutlined />,
                content: '确定要删除选中的告警',
                okText: '确定',
                cancelText: '取消',
                async onOk() {
                  let res = await deleteAlarm({ keys: selectedRowKeys });
                  if (res.result) {
                    message.success('删除成功!');
                    let res = await getAlarmsBySu({ suIndex: suItemData.id });
                    setMonitorState({ alarmList: res?.data || [], selectedRowKeys: [] });
                  } else {
                    message.error(res.msg);
                  }
                },
              });
            }}
          >
            <IconFont type={'iconshanchu1'} />
            批量删除
          </Button>
        </div>
        <AlarmTable />
      </div>
    </div>
  );
};

export default DevMonitoring;
